<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box"
    >
      <div style="display: flex;flex-wrap: wrap;width: 100%;">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.returnCode"
                clearable
                placeholder="采购单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.vendorName"
                clearable
                placeholder="供应商名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.receiptPhone"
                clearable
                @input="queryParams.receiptPhone=limitIntNumber(queryParams.receiptPhone)" :maxlength="11"
                placeholder="联系方式"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="picker">
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-button icon="Search" type="primary" @click="getList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button  type="primary" @click="handleAdd" >新建采购退货</el-button>
      <el-button  type="primary"  >导出</el-button>
    </div>
    <vxe-table style="margin-top: 10px"
               :data="tableList"
               :height="tableHeight"
               align="center"
               border
               :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column title="序号" type="seq" width="60"></vxe-column>
      <vxe-column field="status" width="100" title="单据状态">
        <template v-slot="{row}">
          {{ returnDictLabel(b2b_return_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="returnCode" width="200" title="采购退货单号" ></vxe-column>
      <vxe-column field="vendorName" width="150" title="供应商名称" ></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库"> </vxe-column>
      <vxe-column field="delivery" width="150" title="配送方式" ></vxe-column>
      <vxe-column field="receiptByName" width="150" title="收货人" ></vxe-column>
      <vxe-column field="receiptPhone" width="150" title="联系方式" ></vxe-column>
      <vxe-column field="receiptAddress" width="150" title="收货地址" ></vxe-column>
      <vxe-column field="totalReturnNum" width="150" title="退货商品总量" ></vxe-column>
      <vxe-column field="createByName" width="150" title="创建人" ></vxe-column>
      <vxe-column field="createTime" width="150" title="创建时间" ></vxe-column>
      <vxe-column fixed="right" title="操作" width="100">
        <template #default="{row}">
          <el-button
              type="text"
              style="color:green"
              @click="clickView(row)"
          >查看
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

    <!--    新增 编辑 b2b采购退货 -->
    <EditB2bPurchase v-if="isShowDialog" :title="title" :isShowDialog="isShowDialog" :detailData="detailData" :isView="isView" @cancel="handleClose"></EditB2bPurchase>
  </div>
</template>

<script setup>
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";
import EditB2bPurchase from "@/views/returnGoodsManage/b2bBurchaseReturn/compoent/editB2bPurchase.vue"
import {getB2bPurchaseReturnDetail, getB2bPurchaseReturnList, warehouseGetFilter} from "@/api/scApi";

const {proxy} = getCurrentInstance();
const { b2b_return_status } = proxy.useDict("b2b_return_status");
let timeData=ref([])
const queryParams=ref({
  pageNum: 1,
  pageSize: 10,
})
let loading=ref(false)
const tableList=ref([])
const total=ref(1)

let isView=ref(false)
let detailData=ref({})
const resetQuery = () => {
  timeData.value=[]
  queryParams.value={
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};
function getList(){
  loading.value=true
  queryParams.value.startTime=timeData.value[0]
  queryParams.value.endTime=timeData.value[1]
  let params={
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }
  getB2bPurchaseReturnList(params).then(res=>{
    loading.value=false
    if(res.code===200){
      tableList.value =res.data
      total.value =res.total
    }
  }).finally(()=>{
    loading.value = false
  })
}

onMounted(()=>{
  getWarehouseFilter()
  getList()
})

let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 360;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 360;
  }
  // getList()
})

let isShowDialog=ref(false)
let title=ref("")
function handleAdd(){
  detailData.value ={}
  title.value='添加采购退货'
  isShowDialog.value=true
}

let warehouseList = ref([])
//获取仓库
function getWarehouseFilter() {
  return new Promise(resolve => {
    warehouseGetFilter({
      status: 0
    }).then(res => {
      if (res.code === 200) {
        warehouseList.value = res.data.map(item => {
          item.value = item.warehouseId
          item.label = item.warehouseName
          return item
        })
        resolve("")
      }
    })
  })
}
function handleClose(isReload){
  isView.value = false
  isShowDialog.value = false
  if (isReload) {
    getList()
  }
}

function clickView(row){
  title.value ='查看采购退货'
  isView.value =true
  getDetailList(row.returnId)
}

function getDetailList(id){
  getB2bPurchaseReturnDetail(id).then(res=>{
    if(res.code===200){
      isShowDialog.value =true
      detailData.value =res.data
    }
  })
}
</script>

<style scoped lang="scss">

</style>